/* 主要新闻容器 */
.news-container {
    padding: 10px;
    max-width: 70%; /* 使用最大宽度 */
    margin-left: auto;
    margin-right: auto; /* 居中对齐 */
}

/* 两个单独专栏的样式 */
.special-columns {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* 允许换行 */
}

/* 活动视频 */
.left {
    width: calc(60% - 10px); /* 考虑到间距 */
    margin-bottom: 20px;
}

/* 通知公告 */
.right {
    width: calc(40% - 10px); /* 考虑到间距 */
    margin-bottom: 20px;
}

/* 确保左右两栏总和不超过100%，并添加间距 */
.special-columns > div {
    box-sizing: border-box;
}

/* 活动视频和通知公告的样式 */
.news-item {
   
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    margin-left: 5px;
    padding: 10px; /* 内边距 */
   
    overflow: hidden; /* 确保内容不会溢出 */
    height: 400px;
}

/* 标题和更多的容器 */
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: #666 solid 1px;
}

.left .header-container{
    width: 50.5rem;
}

.right .header-container{
    width: 32.5rem;
}


/* 栏目标题样式 */
.news-title {
    font-size: 1.2em;
    font-weight: bold;
    color: #792323;
    flex-grow: 1; /* 让标题尽可能扩展 */
    text-align: left; /* 标题文本居左 */
}

/* 更多链接样式 */
.news-footer,.news-footer1 {
    cursor: pointer;  
    font-size: 1.2em;
    font-weight: bold;
    color: #792323;
    white-space: nowrap; /* 防止换行 */
    text-align: right; /* "更多"文本居右 */
}

.news-footer{
    margin-right: 10px;
    margin-top :10px;
}



/* 文章内容样式调整 */
.activity-video-container,
.news-content {
    margin-bottom: 10px;
    border-bottom: #666 solid 1px; /* 底部边框 */
}

/* 视频容器 */
.activity-video-container {
    width: 100%; /* 自适应父级元素宽度 */
    height: 500px;
    margin-bottom: 10px;
    overflow: hidden;
}

.activity-video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 通知公告文章内容样式调整 */
.news-content {
    display: flex;
    flex-direction: column;
    color: #000000;
    margin-left: 80%;
}

.news-content h3 {
    margin: 0;
    margin-bottom: 5px;
}

.news-content span {
    white-space: nowrap;
}

/* tab标签专栏的样式 */
.tabbed-columns {
    margin-top: 30px;
}

.tabs {
    display: flex;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
}

.tab-item {
    padding: 10px 20px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.tab-item.active {
    border-bottom-color: #792323;
}

/* 整个tab内容区 */
.selected-column-content {
    padding: 10px;
  
    border-bottom: 1px solid #ccc;
}

/* 文章容器 */
.article-container {
    display: flex;
    align-items: flex-start; /* 对齐顶部 */
    margin-bottom: 20px;
    border-bottom: #666 solid 1px; /* 底部边框 */  
  }
  
  /* 图片样式 */
  .article-image {
    max-width: 150px; /* 设置最大宽度 */
    margin-right: 20px; /* 给图片与文本之间留出空间 */
    object-fit: cover; /* 确保图片不失真 */
    margin-top: 0px;
  }
  
  /* 文章信息 */
  .article-info {
    display: flex;
    flex-direction: column; /* 垂直排列子元素 */
    justify-content: space-between; /* 子元素之间的间距最大化 */
    flex-grow: 1; /* 让文本内容占据剩余的空间 */
    padding: 10px; /* 内边距 */
  
    height: 130px;
    
  }
  
  .article-info h3 {
    margin: 0;
    font-size: 20px;
    margin-bottom: 10px; /* 标题与下方内容的距离 */
  }
  
  .article-info p {
    margin: 30;
    margin-bottom: auto; /* 将简历内容推到中间 */
  }
  
  .article-info span {
    margin-top: auto; /* 将时间信息推到底部 */
    color: #666; /* 颜色 */
    font-size: 0.9em; /* 字体大小 */
  }

/* 响应式设计 */
@media (max-width: 768px) {
    .special-columns {
        flex-direction: column; /* 在小屏幕上堆叠显示 */
    }

    .left, .right {
        width: 100%; /* 在小屏幕上占满整个宽度 */
        margin-left: 0;
        margin-right: 0;
    }
}